<template>
  <div>
    <!-- 首页轮播图的结构 -->
    <Carousel />
    <!-- 首页搜索医院的表单区域 -->
    <Search />
    <el-row gutter="20">
      <el-col :span="20">
        <div class="list">医院列表展示</div>
        <!-- 展示医院的结构 -->
        <div class="hospital" v-if="hasHospitalArr.length > 0">
          <Card
            class="item"
            v-for="(item, index) in hasHospitalArr"
            :key="index"
            :hospitalInfo="item"
          />
        </div>
        <el-empty v-else description="暂无数据" />
      </el-col>
      <el-col :span="4">
        <Tip />
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
//引入组合式API函数
import { onMounted, ref } from "vue";
//引入首页轮播图组件
import Carousel from "./carousel/index.vue";
//引入首页搜索的组件
import Search from "./search/index.vue";
//展示医院新的的卡片组件
import Card from "./card/index.vue";
import Tip from "./tip/index.vue";
import { reqGetHospital } from "../../api/index.js";
//存储已有的医院的数据
let hasHospitalArr = ref([]);
//组件挂载完毕：发一次请求
onMounted(() => {
  getHospitalInfo();
});
//获取已有的医院的数据
const getHospitalInfo = async () => {
  let result = await reqGetHospital();
  if (result.code == 1000) {
    //存储已有的医院的数据
    hasHospitalArr.value = result.data;
  }
};
</script>

<style scoped lang="less">
.list {
  font-size: 20px;
  font-weight: 700px;
  margin-bottom: 10px;
  color: #55a6fe;
}
.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .item {
    width: 48%;
    margin: 10px 0px;
  }
}
</style>
